import { Callout } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'
import ReactLive from '@/components/ReactLive'

# Univer Doc API

<BadgeGroup values={[UniverTypes.DOC]} value={UniverTypes.DOC} />

## Concepts

Univer documents will provide users with the ability to layout documents at a professional level, with concepts that are as consistent as possible with Word.

## Document

The command system `unitId` corresponds to the unique identifier of the document; documents do not have a `subUnitId`.

The text content of the document is stored in the `body.dataStream` string, which does not contain style information.

Style information is stored in a separate data structure and is associated with the text content by subscript indexes.

For elements such as line breaks, page breaks, sections, paragraphs, tables, etc., the text content is marked with different special characters that are converted to the corresponding element at rendering time.

<Callout type="info" emoji="ℹ️">
  Want to learn more about document data structure design? We recommend reading [Univer Document Architecture and Module Design](/blog/post/univer-doc-architecture) and [Initial Exploration of Document Typesetting Design in Univer](/blog/post/doc-typesetting-design).
</Callout>

### Create Document

The `univer.createUnit(UniverInstanceType.UNIVER_DOC, {})` method creates and returns a `DocumentDataModel` object.

In the following example, a blank document is created by passing in an empty object.

export const code = `const univer = new Univer({
  theme: defaultTheme,
    locale: LocaleType.EN_US,
    locales: {
      [LocaleType.EN_US]: enUS,
    },
});

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  footer: false,
});

univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverDocsUIPlugin, {
  container: 'univerdoc',
  layout: {
    docContainerConfig: {
      innerLeft: false,
    },
  },
});

univer.createUnit(UniverInstanceType.UNIVER_DOC, {});`

<ReactLive code={code} />

### Get Document Id

```ts
const univerAPI = FUniver.newAPI(univer);
const activeDoc = univerAPI.getActiveDocument()
const unitId = activeDoc?.getId()
```

### Get Document Data

```ts
const univerAPI = FUniver.newAPI(univer);
const activeDoucment = univerAPI.getActiveDocument()
const saveData = activeDoucment.getSnapshot();
```

Or

```ts
univer.createUnit(UniverInstanceType.UNIVER_DOC, {})
const saveData = document.save();
```

### Destroying Document

When we no longer need the document, we can call the `dispose` method of the Univer instance to destroy the instance.

```ts
univer.dispose();
```


## Text

Operate on text elements in rich text areas

### Append Text

Adds the specified text to the end of this text region.

```ts
const univerAPI = FUniver.newAPI(univer)
const activeDoc = univerAPI.getActiveDocument()
activeDoc?.appendText('Univer')
```

### Delete Text

Delete the character before the cursor

```ts
const univerAPI = FUniver.newAPI(univer)
univerAPI.executeCommand("doc.command.delete-left")
```

Delete the character after the cursor

```ts
const univerAPI = FUniver.newAPI(univer)
univerAPI.executeCommand("doc.command.delete-right")
```

## Styles

Set the font color for the selected text

```ts
univerAPI.executeCommand("doc.command.set-inline-format-text-color", {value: "#ff0000"})
```

## page break

`\f` is a page break, used to insert page breaks in a document.

```ts
const univerAPI = FUniver.newAPI(univer)
const activeDoc = univerAPI.getActiveDocument()
activeDoc?.appendText('\f')
```

{/* range */}

## List

Adds an unordered list to the paragraph where the cursor is located; repeated calls cancel the unordered list.

```ts
const univerAPI = FUniver.newAPI(univer)
univerAPI.executeCommand("doc.command.list-operation", {listType: 'BULLET_LIST'})
```

Adds an ordered list to the paragraph where the cursor is located; repeated calls cancel the ordered list.

```ts
const univerAPI = FUniver.newAPI(univer)
univerAPI.executeCommand("doc.command.list-operation", {listType: 'ORDER_LIST'})
```

## Reference

For more documentation and APIs, please refer to:

- [Univer Document Architecture and Module Design](/blog/post/univer-doc-architecture)
- [Initial Exploration of Document Typesetting Design in Univer](/blog/post/doc-typesetting-design)
- [Facade API](/typedoc/@univerjs/facade/README)
